<!--折线图-->
<template>
<!--  <div :class="className" :style="{height:height,width:width}">{{ ycLineQueryResult }}</div>-->
  <div :class="className" :style="{height:height,width:width}">{{ ycLineQueryResult }}</div>
</template>

<script>
  import echarts from 'echarts'
  require('echarts/theme/macarons') // echarts theme
  import resize from './../mixins/resize'
  // import { listLine } from "@/api/dashboard/linechart"
import {listYcBar} from "@/api/dashboard/ycbar";

  const animationDuration = 3000
  var seriesArr = [];
  var datalegend = [];
  var temp = 0;

  export default {
    mixins: [resize],
    props: {
      ycLineQueryResult:{
        type: Object,
      },
      className: {
        type: String,
        default: 'chart'
      },
      width: {
        type: String,
        default: '100%'
      },
      height: {
        type: String,
        default: '450px'
      },
      autoResize: {
        type: Boolean,
        default: true
      },
    },
    data() {
      return {
        dataResult:{
          indeId:null,
          orgId: null,
          dataYear:null,
          indeName:null,
          dataDimension:null,
        },

        chart: null,
        data:{},
        MapList:[],
        rows:[],

        orgId:[],
        dataDimension:[],
        dataValue:[],
        orgName: [],
        indeName:[],
        indeFlag:[],

      }
    },
    mounted() {
      this.$nextTick(() => {
        this.initChart()
      })
    },
    beforeDestroy() {
      if (!this.chart) {
        return
      }
      this.chart.dispose()
      this.chart = null
    },
    created() {
      // this.getLineList();
    },
    clearLine(){
      this.chart.clear();
      this.chart.setOption(this.chart, true);
    },

    watch: {
      ycLineQueryResult: {
        handler(newValue) {
          // console.log("watch: 监听到的ycLineQueryResult的newValue数据如下"+newValue)
          // console.log(newValue)
          this.emptyChart();
          this.getLineList(newValue);
          // listYcBar(newValue);
        },
        deep: true
      }
    },

    methods: {
      async getLineList(newValue){
        this.loading = true;
        console.log("ycline中ycLineQueryResult的数据:" );
        console.log(this.ycLineQueryResult)

        this.dataResult.indeId = newValue.indeId;
        this.dataResult.dataYear = newValue.dataYear;

        for(let i = 0; i < newValue.orgId.length; i++)
        {
          this.orgId=[];
          this.orgName=[];
          this.dataDimension=[];
          this.dataValue=[];
          this.indeFlag=[];
          this.dataResult.orgId = newValue.orgId[i];

          for(let j = 0; j < newValue.dataDimension.length; j++)
          {
            this.dataResult.dataDimension = newValue.dataDimension[j];
            console.log(this.dataResult.dataDimension);
            await listYcBar(this.dataResult).then(response => {
              this.MapList = response.rows;
              console.log("油厂折线图数据：" + this.MapList);// 确认数据有获取到
              console.log(this.MapList)
              let MapList = this.MapList;
              if (MapList) {
                let obj = eval(MapList);
                for (let k = 0; k < obj.length; k++) {
                  this.orgId.push(MapList[k].orgId);
                  this.dataDimension.push(MapList[k].dataDimension + "月");
                  this.dataValue.push(MapList[k].dataValue);
                  this.orgName.push(MapList[k]['ycOrg'].orgName);
                  this.indeFlag.push(MapList[k]['ycInde'].indeFlag);
                }
              }
            });
            temp = this.orgName.length
          }
          console.log("--------------------this.orgName")
          console.log(this.orgName)
          console.log("--------------------this.dataDimension")
          console.log(this.dataDimension)
          console.log("--------------------this.dataValue")
          console.log(this.dataValue)
          console.log("--------------------temp------------------")
          console.log(temp)
          let seriesArrData =[]
          Object.assign(seriesArrData, this.dataValue)
          seriesArrData.unshift(null)

          seriesArr.push({
            name: this.orgName[0],
            data: seriesArrData,  //第i个月份对应的j个采矿的数据
            type: 'line',

          })
          datalegend.push(this.orgName[0])
        }

        let seriesArrFlag = []
        Object.assign(seriesArrFlag, seriesArr)
        seriesArrFlag.unshift({
          name: '标杆值',
          type: 'line',
          color:'#900C3F',
          data:[this.indeFlag[0]],
          // 辅助线相关配置markLine
          markLine: {
            silent: true, //基线显示 隐藏
            symbol:'none',// 不显示箭头和圆点
            label:{
              position: "end",
              color:'#900C3F'
            },
            lineStyle: {
              normal: {
                color: '#900C3F', // 这儿设置安全基线颜色
              },
            },
            data: [
              {
                silent: false,
                name: "标杆值",
                yAxis: this.indeFlag[0],
                label: {
                  formatter: "标杆值"+this.indeFlag[0],
                },
              },
            ]
          },
        })

        console.log("-------------------seriesArr---------------------")
        console.log(seriesArr)
        console.log("-------------------seriesArrFlag---------------------")
        console.log(seriesArrFlag)

        let dataLegendNew = [];
        let xAxisData = [];
        Object.assign(dataLegendNew, datalegend)
        Object.assign(xAxisData, this.dataDimension)
        dataLegendNew.unshift('标杆值')
        xAxisData.unshift('标杆值')

        console.log("-------------------dataLegendNew---------------------")
        console.log(dataLegendNew)
        console.log("-------------------xAxisData---------------------")
        console.log(xAxisData)

        //动态插入数据时，数据在这里设置更新
        this.chart.setOption({
          legend: {
            data: dataLegendNew,
            orient: 'horizontal',
          },
          xAxis: {
            type: 'category',
            data: xAxisData,
          },
          series: seriesArrFlag,
        });

      },
      initChart() {
        this.chart = echarts.init(this.$el, 'macarons')
        this.chart.setOption({
          toolbox: {
            show: true,
            feature: {
              dataZoom: [
                {
                  type:'inside',
                  orient: 'vertical',
                },
                {
                  type: 'inside'
                }
              ],

              magicType: { type: ['line', 'bar'] },
              restore: {},
              saveAsImage: {}
            }
          },
          xAxis: {
            data: [],
            boundaryGap: false,
            axisTick: {
              show: false
            }
          },
          grid: {
            top: 80,
            left: '2%',
            right: '7%',
            bottom: '3%',
            containLabel: true
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross'
            },
            padding: [5, 10]
          },
          yAxis: {
            axisTick: {
              show: false
            }
          },
        })
      },
      emptyChart() {
        this.orgId=[];
        this.orgName=[];
        this.dataDimension=[];
        this.dataValue=[];
        this.indeFlag=[];
        seriesArr = [];
        datalegend = [];
        this.chart.clear();
        this.chart.setOption({
          toolbox: {
            show: true,
            feature: {
              dataZoom: [
                {
                  type:'inside',
                  orient: 'vertical',
                },
                {
                  type: 'inside'
                }
              ],
              magicType: { type: ['line', 'bar'] },
              restore: {},
              saveAsImage: {}
            }
          },
          legend: {
            data: datalegend,
            orient: 'horizontal',
          },
          xAxis: {
            data: this.dataDimension,
            boundaryGap: false,
            axisTick: {
              show: false
            }
          },
          series:seriesArr,
          grid: {
            top: 80,
            left: '2%',
            right: '7%',
            bottom: '3%',
            containLabel: true
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross'
            },
            padding: [5, 10]
          },
          yAxis: {
            axisTick: {
              show: false
            }
          },
        },true)



      }
    }
  }
</script>
